<template>
    <div>
        <div class="flex items-center pl-36px pt-26px pr-26px text-14px font-bold level-2-title">
            预设组合
        </div>
        <div class="mt-10px pl-26px">
            <div class="combination-checkbox">
                <div class="custom-checkbox-group flex-wrap">
                    <el-checkbox-group v-model="ruleForm.combinationOptions" class="flex !flex-row flex-wrap w-full">
                        <div class="flex items-center w-25%" v-for="item in ruleForm.combinations" :key="item.ID">
                            <el-checkbox :value="item.ID"></el-checkbox>
                            <label class="custom-checkbox" @click="handleChecked(item.ID)">
                                <span class="custom-checkbox-label" :style="{ color: item.FontColor }">
                                    {{ item.Presets }} <span v-if="item.Count">({{ item.Count }})</span>
                                </span>
                            </label>
                            <el-button link class="ml-10px" v-if="item.Count" @click="handleView(item)">查看</el-button>
                        </div>
                    </el-checkbox-group>
                </div>
            </div>
        </div>
        <CombinationWordDialog v-model:CombinationWordDialog="state.isCombinationDialog" :title="state.dialogTitle" :combinations="state.combinations" @closeDialog="state.isCombinationDialog = false" />
    </div>
</template>

<script setup lang="ts">
import CombinationWordDialog from './CombinationWordDialog.vue'
import { getCombinationWordsApi } from '@/api/geo'

const props = defineProps<{
    ruleForm: any
}>()

const state = reactive({
    isCombinationDialog:false,
    combinations: [],
    dialogTitle:''
})

function handleChecked(id: number) {
    if(props.ruleForm.combinationOptions.includes(id)) {
        // 选中状态，取消选中
        props.ruleForm.combinationOptions = props.ruleForm.combinationOptions.filter((item: number) => item !== id)
    } else {
        // 未选中状态，选中
        props.ruleForm.combinationOptions.push(id)
    }
}

async function handleView(word:any) {
    const res: ResType = await getCombinationWordsApi({
        id: word.ID,
        keyword: props.ruleForm.mainWords[0].label
    })
    if(res.code === 200) {
        state.combinations = res.data
        state.dialogTitle = `查看组合词 - ${word.Presets}`
        state.isCombinationDialog = true
    }
}
</script>

<style scoped>
:deep(.el-radio) {
    margin-right: 0 !important;
    width: 25%;
}

:deep(.el-checkbox) {
    margin-right: 0 !important;
}

.custom-checkbox-group {
    display: flex;
    flex-wrap: wrap;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 32px;
}
.custom-checkbox-label {
    font-size: 14px;
}

</style>